<template>
  <!-- 控制中心表格管理导航栏 -->
  <div class="container-fluid controlCenterBanner">
    <div class="row">
      <!-- 在移动端显示 -->
      <div class="col-12 d-block d-md-none bg-secondary p-0 pl-1 my-1 text-white">
        表格：
        <span class="">
          <router-link to='/controlCenter/controlCenterBannerUser' class="text-white mr-2" @click="">用户信息界面</router-link>
        </span>
        <span class="">
          <router-link to='/controlCenter/controlCenterBannerBooks' class="text-white mr-2" @click="">书籍信息界面</router-link>
        </span>
        <span class="">
          <router-link to='/controlCenter/controlCenterBannerComment' class="text-white" @click="">用户评论界面</router-link>
        </span>
      </div>
      <!-- 在pc端显示 -->
      <div class="col-md-2 leftContent d-none d-md-block p-0">
        <router-link to='/controlCenter/controlCenterBannerUser' class="d-flex align-items-center mb-1 px-3 text-white titleItem">
          <img src="@/assets/img/control/users.png" alt="" class="mr-1">
          <span>用户信息</span>
        </router-link>
        <router-link to='/controlCenter/controlCenterBannerBooks' class="d-flex align-items-center mb-1 px-3 text-white titleItem">
          <img src="@/assets/img/control/books.png" alt="" class="mr-1">
          <span>书籍信息</span>
        </router-link>
        <router-link to='/controlCenter/ControlCenterBannerComment' class="d-flex align-items-center mb-1 px-3 text-white titleItem">
          <img src="@/assets/img/control/comments.png" alt="" class="mr-1">
          <span>用户评论</span>
        </router-link>
      </div>
      <div class="col-12 col-md-10 p-0">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ControlCenterBanner',
    data () {
      return {

      }
    },
    methods: {

    }
  }

</script>

<style scoped>
  .controlCenterBanner {
    background-color: rgb(240, 240, 240);
  }

  .leftContent {
    text-align: center;
    background-color: #333;
  }

  .leftContent img {
    width: 30px;
    height: 30px;
  }

  .titleItem {
    height: 50px;
  }

  .titleItem:hover {
    background-color: #777;
    text-decoration: none;
  }

  .router-link-active {
    background-color: #777;
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .titleItem {
      font-size: .925em;
    }
  }
</style>